<template>
    <view>

      <view class="person-wrap" ref="personWrap">
        <!--v-for="a in indexaa"-->
        <ul class="person-list" ref="personTab">
          <li class="person-item" >
            <text v-for="a in indexaa">
                <van-image
                  width="12rem"
                  height="11rem"
                  fit="contain"
                  style="display: inline-block;padding: 0 5px"
                  src="https://img.yzcdn.cn/vant/cat.jpeg"
                />
            </text>
          </li>
        </ul>
      </view>

    </view>
</template>

<script>
  import BScroll from 'better-scroll'
    export default {
        name: "personScrollzz",
      data(){
        return{
          indexaa:5,
        }
      },
      created() {
        this.$nextTick(() => {
          this.personScroll();
      });
      },

      methods:{
        personScroll() {
          // 默认有六个li子元素，每个子元素的宽度为120px
          let width = 1 * 80;
          this.$refs.personTab.style.width = width + "rem";
          // this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
          this.$nextTick(() => {
            if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.personWrap, {
              startX: 0,
              click: true,
              scrollX: true,
              // 忽略竖直方向的滚动
              scrollY: false,
              eventPassthrough: "vertical"
            });
          } else {
            this.scroll.refresh();
          }
        });
        },
      }

    }
</script>

<style scoped>

</style>
